<template>
  <div class="dataScreen-header">
    <div class="left" style="text-align: left">
      <img src="../assets/images/logoIcon.png" class="logoImg" alt="" />
      <el-link @click="goTo('homePage')">首页</el-link>
      <el-divider direction="vertical" />
      <el-link @click="goTo('homePage')">关注</el-link>
      <el-divider direction="vertical" />
      <el-link @click="goTo('homePage')">推荐</el-link>
      <el-divider direction="vertical" />
      <el-link @click="goTo('homePage')">热门</el-link>
      <el-divider direction="vertical" />
      <el-link>本地</el-link>
    </div>
    <div class="logo">{{ title }}</div>
    <div class="right">
      <el-link class="p-0" @click="openAiWindow" :underline="false">
        <img src="../assets/images/robot.png" alt="" />
      </el-link>
      <el-link class="dt-link" :underline="false" @click="openInNewTab('http://10.154.40.42:8090/home')">
        <i class="iconfont icon-tiaodutai"></i>
        调度台
      </el-link>
      <!-- 假设 "我的工作台" 链接与调度台相同 -->
      <el-link class="dt-link" :underline="false" @click="goTo('home')">
        <i class="iconfont icon-gongzuotai"></i>
        我的工作台
      </el-link>
      <el-divider direction="vertical" />
      <el-link class="pl-8 pr-8" :underline="false"><i class="iconfont icon-xiaoxi mb0"></i></el-link>
      <el-divider direction="vertical" />
      <el-link :underline="false"><Fullscreen class="iconfont" /></el-link>
    </div>
  </div>
  <el-dialog
    class="dt-dialog"
    v-model="aiVisible"
    title="ChatGpt"
    :footer="null"
    :width="500"
    centered
    :closable="false"
    :body-style="{ padding: '0px' }"
    mask-closable
  >
    <div style="display: flex; align-items: center; justify-content: center; height: 700px">
      <iframe allow="microphone;" src="https://chat18.aichatos8.com/#/" style="width: 100%; height: 100%"></iframe>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, withDefaults, defineProps } from "vue";
import { useRouter } from "vue-router";
import Fullscreen from "@/layouts/components/Header/components/Fullscreen.vue";

interface Props {
  title?: string;
}

withDefaults(defineProps<Props>(), { title: "网络中台" });
const router = useRouter();
const aiVisible = ref(false);

const goTo = (url: string) => {
  if (router.currentRoute.value.path !== url) {
    router.push({ name: url });
  }
};

const openInNewTab = (url: string) => {
  window.open(url, "_blank"); // 在新标签页中打开指定的 URL
};

const openAiWindow = () => {
  aiVisible.value = true;
};
</script>

<style lang="scss" scoped>
@import "../assets/style/index.scss";
</style>
